<!-- 按钮 -->
<template>
    <div class="li-button" @click="handleClick">
        <button
            :class="[
                'flex',
                `li-button-size-${size}`,
                disabled ? 'li-button-disabled' : dashed ? `li-button-dashed-${type}` : `li-button-type-${type}`,
                loading && 'li-button-showloading',
                shape == 'circle' ? 'li-button-shape-circle' : 'li-button-shape-default'
            ]"
            :disabled="disabled || loading"
        >
            <span v-show="loading" :class="['li-button-loading iconfont icon-jiazai_shuaxin']"></span>
            <span v-if="icon" :class="[icon, 'li-button-icon']"></span>
            <span :class="[$slots.default && icon ? 'li-button-content' : '']"><slot></slot></span>
        </button>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, onMounted, computed } from 'vue';
const props = defineProps({
    // 按钮类型: primary | succeed | warning | error | default
    type: {
        type: String,
        default: 'default'
    },
    // 按钮大小: large | middle | small
    size: {
        type: String,
        default: 'middle'
    },
    // 按钮禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 按钮加载
    loading: {
        type: Boolean,
        default: false
    },
    // 按钮图标
    icon: {
        type: String,
        default: ''
    },
    // 按钮形状 default | circle
    shape: {
        type: String,
        default: 'default'
    },
    // 启用虚线
    dashed: {
        type: Boolean,
        default: false
    },
    // 页面跳转功能
    href: {
        type: String,
        default: ''
    }
});
const emits = defineEmits(['on-click']);

// // 默认插槽是否有内容
// const slotsDefault = computed(() => {
//     return $slots.default;
// });

const handleClick = () => {
    if (props.href) window.location.href = props.href;
    emits('on-click');
};

const install = (app: any, component: any) => {
    app.component('LiButton', component);
};
</script>

<style lang="less" scoped>
// .btn-border(@style, @color) {
//     border-width: 1px;
//     border-style: @style;
//     border-color: @color;
// }

.li-button {
    display: inline-block;
    margin: 0 12px 10px 0;
    min-width: 40px;

    > button {
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        padding: 0 8px;
        transition: all 0.3s;
    }

    // 加载
    .li-button-loading {
        margin-right: 5px;
        font-size: 16px;
        -webkit-animation-name: rotate;
        -webkit-animation-duration: 1.5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
    }

    // 禁用
    .li-button-disabled {
        cursor: not-allowed;
        background: #f5f5f5;
        color: @color-lighter;
        border: 1px solid @border-lighter;
        // text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px #0000000b;
        // opacity: 0.8;
    }
    .li-button-showloading {
        cursor: default;
        opacity: 0.8;
    }
    .li-button-icon {
        // margin-right: 5px;
        font-size: 14px;
    }
    .li-button-content {
        margin-left: 8px;
    }

    // 圆边
    .li-button-shape {
        &-default {
            border-radius: 2px;
        }
        &-circle {
            border-radius: 20px;
        }
    }

    // 虚线
    .li-button-dashed {
        &-default {
            background: @bg-white;
            color: @color-normal;
            border: 1px dashed @border-lighter;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
                color: @color-primary;
                border: 1px dashed @border-primary;
            }
        }

        &-primary {
            background: @bg-white;
            color: @color-primary;
            border: 1px dashed @border-primary;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
            }
        }

        &-succeed {
            background: @bg-white;
            color: @color-succeed;
            border: 1px dashed @border-succeed;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
            }
        }

        &-warning {
            background: @bg-white;
            color: @color-warning;
            border: 1px dashed @border-warning;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
            }
        }

        &-error {
            background: @bg-white;
            color: @color-error;
            border: 1px dashed @border-error;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
            }
        }
    }

    // 非虚线
    .li-button-type {
        &-default {
            background: @bg-white;
            color: @color-normal;
            border: 1px solid @border-lighter;
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
                color: @color-primary;
                border: 1px solid @border-primary;
            }
        }

        &-primary {
            background: @bg-primary;
            color: #ffffff;
            border: 1px solid @border-primary;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
            }
        }

        &-succeed {
            background: @bg-succeed;
            color: #ffffff;
            border: 1px solid @border-succeed;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
                color: @color-succeed;
                border: 1px solid @border-succeed;
            }
        }

        &-warning {
            background: @bg-warning;
            color: #ffffff;
            border: 1px solid @border-warning;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
                color: @color-warning;
                border: 1px solid @border-warning;
            }
        }

        &-error {
            background: @bg-error;
            color: #ffffff;
            border: 1px solid @border-error;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
            box-shadow: 0 2px #0000000b;

            &:hover {
                opacity: 0.9;
                color: @color-error;
                border: 1px solid @border-error;
            }
        }
    }

    // 字体大小
    .li-button-size {
        &-middle {
            height: 32px;
        }
        &-large {
            height: 40px;
        }
        &-small {
            height: 24px;
        }
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
</style>
